import React, { useState, useEffect } from "react";
import { Space, Table, Tag,Collapse } from "antd";
import { Button } from 'antd-mobile'
// import Toubu from "../../comportents/Toubu";
import type { TableProps } from "antd";

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
  tags: string[];
  rowKey: number;
}
import http from "../../api/axiosapi";
function Index() {
  const columns: TableProps<DataType>["columns"] = [
    {
      title: "用户角色",
      dataIndex: "title",
      key: "title",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "权限字符",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "创建时间",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },

    {
      title: "操作",
      key: "action",
      render: (_, record) => (
        <Space size="middle">
          <a>Invite {record.name}</a>
          <a>Delete</a>
        </Space>
      ),
    },
  ];
  const [listdata, setListdata] = useState([]);
  const [kets, setket] = useState("");
  const datas = async () => {
    const res = await http.get("/article/list");
    console.log(res);
    setListdata(res.data.rows);
    setket(res.data.rows[1].id);
  };
  console.log("212", kets);

  useEffect(() => {
    datas();
  }, []);

  return (  
    <div>
      {/* <Toubu></Toubu> */}
      <Collapse size="small" >
      <Table<DataType> columns={columns} dataSource={listdata} rowKey={kets} />
      </Collapse>
      
    </div>
  );
}

export default Index;
